<template>
	<view class="wrapper">
		<view class="input-area">
			<view class="select-area">
				<view class="select-item" @click="onEmojiClick('firstEmoji')">
					<u-icon name="plus" size="20"></u-icon>
					<text>{{firstEmoji}}</text>
				</view>
				<view class="select-item" @click="onEmojiClick('secondEmoji')">
					<u-icon name="plus" size="20"></u-icon>
					<text>{{secondEmoji}}</text>
				</view>
			</view>
			<!-- <u-input  v-model="firstEmoji"></u-input> -->
			<!-- <u-input v-model="sencondEmoji"></u-input> -->
		</view>
		<image :show-menu-by-longpress='true' class="result-img" :src="result" v-if="result" mode="widthFix"
			@click="onResultClick(result)"></image>
		<u-button text="合成" type="primary" @click="onPrimaryClick"></u-button>
		<u-loading-page :loading="isLoading" bg-color="rgba(0, 0, 0, .3)" loadingText="合成中"></u-loading-page>
		<u-popup :show="show" mode="bottom" @close="show = false">
			<view class="emoji-content">
				<view class="emoji-item" v-for="item in emojiList" :key="item.emoji" @click="onEmojiItemClick(item)">
					{{item.emoji}}
				</view>
			</view>
		</u-popup>
		<tabbar cur="emojiFusion"></tabbar>
	</view>
</template>
<script>
	import emojiList from '../../utils/emoji'
	export default {
		data() {
			return {
				isLoading: false,
				emojiList,
				show: false,
				firstEmoji: '',
				secondEmoji: '',
				type: '',
				result: ''
			}
		},
		methods: {
			onEmojiItemClick(item) {
				this[this.type] = item.emoji
				this.show = false
			},
			onEmojiClick(type) {
				this.show = true
				this.type = type
			},
			onPrimaryClick() {
				if (!this.firstEmoji || !this.secondEmoji) {
					uni.showToast({
						title: '请选择emoji',
						icon: 'none'
					})
					return
				}
				this.isLoading = true
				uni.request({
					url: 'https://api.zuzo.cc/api/emojimix.php',
					method: 'get',
					data: {
						emoji1: this.firstEmoji,
						emoji2: this.secondEmoji
					},
					success: res => {
						this.isLoading = false
						this.result = res.data.data.url
					},
					fail: err => {
						this.isLoading = false
					}
				})
			},
			onResultClick(src) {
				uni.downloadFile({
					url: src, //分享的图片的链接
					success: (res) => {
						this.isloading = false
						wx.showShareImageMenu({
							path: res.tempFilePath
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 80%;
		margin: 50px auto;

		/deep/ button {
			width: 80%;
			margin: 40px 0;
		}

		.input-area {
			width: 100%;
			display: flex;
			align-items: center;

			.select-area {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.select-item {
					width: 100px;
					height: 100px;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1px solid #eee;
					border-radius: 20px;
					position: relative;

					text {
						position: absolute;
						width: 100%;
						height: 100%;
						left: 0;
						top: 0;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 80px;
					}
				}
			}

		}

		.result-img {
			width: 80px;
			padding: 10px;
			border: 1px solid #eee;
			border-radius: 10px;
			margin: 40px auto 0;
		}

		.emoji-content {
			display: flex;
			flex-wrap: wrap;
			height: 50vh;
			overflow-y: auto;
			margin: 10px 0;

			.emoji-item {
				width: 20%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 50px;
			}
		}
	}
</style>